<template>
  <div class="content-container" style="position: relative;height:calc(100vh - 60px)">
    <div class="panel" >
      <div class="info-header">
        <span style="height: 40px;position: absolute;right: 20px;top: 10px;"><span style="font-weight: bolder;color: #FF6B6B">{{(positionInfo.qsxz00)?(positionInfo.qsxz00/1000).toFixed(1)+"k":""}}-{{(positionInfo.jzxz00)?(positionInfo.jzxz00/1000).toFixed(1)+"k":""}}</span></span>

        <span style="height: 40px;position: absolute;right: 20px;bottom: 0px;font-size: 20px">浏览量：{{positionInfo.llsl00}}</span>

        <div style="text-align: left"><span style="margin: 20px auto 20px 20px;display: inline-block;font-size: large;font-weight: bolder;font-size: 28px">{{positionInfo.gwmc00}}</span></div>
        <div style="text-align: left">
          <span style="display: inline-block;padding: 5px;background-color: #f9a74f;margin-left: 20px;border-radius: 4px;color: white">{{positionInfo.fbzt00}}</span>
          <span style="display: inline-block;margin-left: 20px;color: #2380ee;font-size: large">学历要求:{{dict.xlyqOptions[positionInfo.xlyq00]}}</span>
          <span style="display: inline-block;margin-left: 20px;color: #2380ee;font-size: large">工作年限:{{dict.gznxOptions[positionInfo.gznx00]}}</span>
          <span style="display: inline-block;margin-left: 20px;font-weight: bolder">招聘{{positionInfo.zprs00}}人</span>
        </div>
        <div style="text-align: left">
          <span style="display: inline-block;margin-left: 20px;font-size: small;font-weight: bold">企业地址:{{positionInfo.qydz00}}</span>
        </div>
        <div style="text-align: left">
          <span style="display: inline-block;margin-left: 20px;font-size: small">招聘截止时间:{{positionInfo.zpjz00}}</span>
        </div>
      </div>
      <div class="info-gwms">
        <div style="text-align: left;font-size: large;font-weight: bolder">
          <span style="margin: 20px auto 20px 20px;display: inline-block;">岗位描述</span>
        </div>
        <div style="text-align: left;padding: 20px;font-size: large" v-html="positionInfo.gwms00"></div>
      </div>
      <div class="info-lxfs">
        <div style="text-align: left;font-size: large;font-weight: bolder">
          <span style="margin: 20px auto 20px 20px;display: inline-block;">联系方式</span>
        </div>
        <div style="text-align: left;padding-left: 20px;display: flex">
          <span style="display: inline-block;font-weight: bolder;">联系人:{{positionInfo.gwlxr0}}（{{positionInfo.gwlxfs}}）</span>
          <span style="display: inline-block;font-weight: bolder;">工作地点:{{positionInfo.gzqy00}} {{positionInfo.gzdz00}}</span>
        </div>
        <div style="margin-top: 10px;margin-left: 20px;margin-right: 20px;height: 400px" ref="gzdq"></div>
      </div>
    </div>

  </div>
</template>

<script>

import ReturnBtn from "@/views/components/ReturnBtn.vue";
import {positionApi} from "@/api";

export default {
  name:"position-query-qz-detail",
  components:{
    ReturnBtn
  },
  data(){
    return {
      gwxh00:"",
      positionInfo:{},
      dict:{
        xlyqOptions: {
          "0":"不限要求",
          "1":"初中及以下",
          "2":"高中/中专",
          "3":"专科",
          "4":"本科",
          "5":"研究生及以上",
        },
        gznxOptions: {
          "0":"不限",
          "1":"1年以内",
          "2":"1-3年",
          "3":"3-5年",
          "4":"5-10年",
          "5":"10年以上",
        }
      }
    }
  },
  methods:{
    initMap() {
      //定义地图中心点坐标
      let center = new TMap.LatLng(this.positionInfo.gwwd00, this.positionInfo.gwjd00)
      //定义map变量，调用 TMap.Map() 构造函数创建地图
      let map = new TMap.Map(this.$refs.gzdq, {
        center: center,//设置地图中心点坐标
        zoom: 17.2,   //设置地图缩放级别
      });
      var markerLayer = new TMap.MultiMarker({
        map: map,  //指定地图容器
        //样式定义
        styles: {
          //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
          "myStyle": new TMap.MarkerStyle({
            "width": 25,  // 点标记样式宽度（像素）
            "height": 35, // 点标记样式高度（像素）
            //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
            "anchor": { x: 16, y: 32 }
          })
        },
        //点标记数据数组
        geometries: [{
          "id": "1",   //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
          "styleId": 'myStyle',  //指定样式id
          "position": center,  //点标记坐标位置

        }
        ]
      });
}
  },
  created() {
    this.gwxh00=this.$route.query.gwxh00
    positionApi.queryQzPositionDetail({gwxh00:this.gwxh00}).then((res)=>{
       this.positionInfo=res.data
      this.initMap()
    })
  }

}
</script>

<style lang="scss" scoped>
.panel{
  font-size: 26px;
  position: relative;
  width: 100%;
  height: 100%;
  .info-header{

    position: relative;
    border-radius: 8px;
    margin-top: 20px;
    width: 1600px;
    margin-left: 160px;
    background-color: white;
    padding-bottom: 10px;


  }
  .info-gwms{
    border-radius: 8px;
    margin-top: 20px;
    width: 1600px;
    margin-left: 160px;
    background-color: white;
    padding-bottom: 10px;
  }
  .info-lxfs{
    border-radius: 8px;
    margin-top: 20px;
    width: 1600px;
    margin-left: 160px;
    background-color: white;
    padding-bottom: 10px;
  }
}
</style>
